﻿@model EmptoolWebApp.Models.EmployeeListViewModel
@{
    ViewBag.Title = "List employee";
    Layout = "~/Views/Shared/_LayoutList.cshtml";
}

<style type="text/css">
    #drop_zone {
        border: 5px solid blue;
        width: 200px;
        height: 100px;
    }
    #filedrag {
	    display: none;
	    font-weight: bold;
	    text-align: center;
	    padding: 1em 0;
	    margin: 1em 0;
	    color: #555;
	    border: 2px dashed #555;
	    border-radius: 7px;
	    cursor: default;
    }

    #filedrag.hover {
	    color: #f00;
	    border-color: #f00;
	    border-style: solid;
	    box-shadow: inset 0 3px 4px #888;
    }
</style>

<table class="table table-striped table-hover">
    <caption>Employee List of @Model.CompanyName</caption>
    <thead>
        <tr>
            <th class="col-md-1">#</th>
            <th class="col-md-2">First Name</th>
            <th class="col-md-2">Last Name</th>
            <th class="col-md-2">Department</th>
            <th class="col-md-2">Job Title</th>
            <th class="col-md-1">Action(s)</th>
            <th class="col-md-2"></th>
        </tr>
    </thead>
    <tbody>
        @if ((Model != null) && (Model.EmployeeEntityList != null) && (Model.EmployeeEntityList.Count > 0))
        {
            int record_number = 1;
            foreach (EmptoolWebApp.Entities.EmployeeEntity employee in Model.EmployeeEntityList)
            {
                <tr>
                    <td class="col-md-1">@record_number</td>
                    <td class="col-md-2">@employee.FirstName</td>
                    <td class="col-md-2">@employee.LastName</td>
                    <td class="col-md-2">@employee.Department</td>
                    <td class="col-md-2">@employee.JobTitle</td>
                    <td class="col-md-1">Action(s)</td>
                    <td class="col-md-6"></td>
                </tr>
            }
        }
        else
        {
            <tr>
                <td colspan="7" class="col-md-12">No records found.</td>
            </tr>
        }

    </tbody>
</table>

<div id="drop_zone"
     ondrop="drop_handler(event);"
     ondragover="dragover_handler(event);">
    <strong><Drag one or more files to this Drop Zone ...</strong>
</div>

@*@using (Html.BeginForm("Upload", "Employee", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        <input id="fileupload" type="file" name="files" data-url="server/php/" multiple />
        <input type="submit" name="Submit" id="Submit" value="Upload" />
    }*@

@*<input id="fileupload" type="file" name="files" data-url="server/php/" multiple />
    <button type="button">Upload</button>*@

<span onclick="openNav()">open</span>

<div>
    <label for="fileselect">Files to upload:</label>
    <input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />
    <div id="filedrag">or drop files here</div>
</div>


<!-- The overlay -->
<div id="myNav" class="overlay">

    <!-- Button to close the overlay navigation -->
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

    <!-- Overlay content -->
    <div class="overlay-content">
        @*<a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>*@
    </div>

</div>

@section actions {
    <div class="well" data-spy="affix">

        <div class="panel panel-primary action">
            <div class="panel-heading">
                <h3 class="panel-title">Actions</h3>
            </div>
            <div class="panel-body">
                The following actions are available.
            </div>
            <ul class="list-group">
                <li class="list-group-item">
                    <a href="@Url.Action("Create", "Employee", new { id = Model.CompanyPK })" class="btn btn-link btn-sm">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                        Add employee
                    </a>
                </li>

                <li class="list-group-item">
                    <a href="@Url.Action("Download", "Employee")" class="btn btn-link btn-sm">
                        <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
                        Download sample employee list
                    </a>
                </li>

                <li class="list-group-item">
                    <a href="@Url.Action("Upload", "Employee")" class="btn btn-link btn-sm">
                        <span class="glyphicon glyphicon-upload" aria-hidden="true"></span>
                        Upload employee list
                    </a>
                </li>

                <li class="list-group-item">
                    <a href="@Url.Action("Upload", "Employee")" class="btn btn-link btn-sm">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                        Upload employee list
                    </a>
                </li>


            </ul>
        </div>

    </div>
}

@section scripts{
    <script type="text/javascript">
        function openNav() { /* Open when someone clicks on the span element */
            $("#myNav").width("100%");
            //document.getElementById("myNav").style.width = "100%";
        }
        
        function closeNav() { /* Close when someone clicks on the "x" symbol inside the overlay */
            document.getElementById("myNav").style.width = "0%";
        }

$(function ($) {
    //$('#fileupload').fileupload({
    //    dataType: 'json',
    //    done: function (e, data) {
    //        $.each(data.result.files, function (index, file) {
    //            $('<p/>').text(file.name).appendTo(document.body);
    //        });
    //    }
    //});

    $(document).on("dragleave", null, null, function (e) {
        e.preventDefault();
        closeNav();
        console.log("dragleave");
    });

    $(document).on("dragover", null, null, function (e) {
        e.preventDefault();
        openNav();
        console.log("dragover");
    });

    $(document).on("drop", null, null, function (e) {
        console.log("drop");
        var files, idx, fileReader;
        e.preventDefault();
        files = e.originalEvent.dataTransfer.files;

        if (files.length === 0) {
            return;
        }

        for (idx = 0; idx < files.length; idx++) {
            fileReader = new FileReader();
            fileReader.onload = (function (file) {
                debugger;
                closeNav();
                return;
                return function (e) {
                    debugger;
                    // body.append('<div class="dataurl"><strong>' + file.fileName + '</strong>' + e.target.result + '</div>')
                }
            })(files[idx]);
            fileReader.readAsDataURL(files[idx]);
        }
        return false;
    });
    
}(jQuery));

//function dragend_handler(ev) {
//    console.log("dragEnd");

//    // Remove all of the drag data
//    var dt = ev.dataTransfer;
//    if (dt.items) {
//        // Use DataTransferItemList interface to remove the drag data
//        for (var i = 0; i < dt.items.length; i++) {
//            dt.items.remove(i);
//        }
//    } else {
//        // Use DataTransfer interface to remove the drag data
//        ev.dataTransfer.clearData();
//    }
//}
    </script>
}